<template>
  <div class="top-taps">
    <div class="tabs-cont">
      <div class="left-cont fl">
        <div class="pro-name fl" @click="ToHome">鲲鹏</div>
        <div class="pro-func fl" @click="ToHome">
          <div>产品数字化</div>
          <div>服务平台</div>
        </div>
        <div class="shu fl"></div>
        <div class="city fl">
          <span>{{ city }}</span>
          <el-select
            v-model="value"
            placeholder="【切换城市】"
            size="mini"
            class="change-city"
            @change="ChangeCity"
            style="line-height: 1.4"
          >
            <el-option label="长沙" value="长沙"></el-option>
            <el-option label="株洲" value="株洲"></el-option>
            <el-option label="湘潭" value="湘潭"></el-option>
            <el-option label="衡阳" value="衡阳"></el-option>
            <el-option label="邵阳" value="邵阳"></el-option>
            <el-option label="岳阳" value="岳阳"></el-option>
            <el-option label="常德" value="常德"></el-option>
            <el-option label="张家界" value="张家界"></el-option>
            <el-option label="益阳" value="益阳"></el-option>
            <el-option label="郴州" value="郴州"></el-option>
            <el-option label="永州" value="永州"></el-option>
            <el-option label="怀化" value="怀化"></el-option>
            <el-option label="娄底" value="娄底"></el-option>
            <el-option
              label="湘西土家族苗族自治"
              value="湘西土家族苗族自治"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="right-cont fr">
        <ul class="tabs-list">
          <li @click="ToHome">首页</li>
          <li :class="active == 2 ? 'active' : ''" @click="ToCompany">
            查公司
          </li>
          <li :class="active == 3 ? 'active' : ''" @click="ToNews">政策快报</li>
          <li :class="active == 4 ? 'active' : ''" @click="ToMatching">
            政策匹配
          </li>
          <li :class="active == 5 ? 'active' : ''" @click="ToRe(5, 1)">
            找项目
          </li>
          <li :class="active == 6 ? 'active' : ''" @click="ToRe(6, 2)">
            找人才
          </li>
          <li :class="active == 7 ? 'active' : ''" @click="ToExpert">找专家</li>
          <li :class="active == 8 ? 'active' : ''" @click="ToRe(8, 3)">
            找服务机构
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TopTabs",
  data() {
    return {
      city: "长沙",
      active: 2,
      value: "",
    };
  },
  methods: {
    ChangeCity(value) {
      //console.log(value);
      this.city = value;
      this.value = "";
      this.$cookies.set("city", value);
    },
    ToHome() {
      this.$router.push({ name: "Home" });
    },
    ToCompany() {
      this.$router.push({ name: "Company" });
      this.$cookies.set("TopActive", 2);
    },
    ToNews() {
      this.$router.push({ name: "News" });
      this.$cookies.set("TopActive", 3);
    },
    ToMatching() {
      this.$router.push({ name: "Matching" });
      this.$cookies.set("TopActive", 4);
    },
    ToExpert() {
      console.log(111);
      this.$router.push({ name: "Expert" });
      this.$cookies.set("TopActive", 7);
    },
    ToRe(tabs, n) {
      if (this.active == 5 || this.active == 6 || this.active == 8) {
        this.active = tabs;
        this.$emit("func", n);
        this.$cookies.set("TopActive", tabs);
        this.$router.push({ name: "Resource", params: { Type: n } });
      } else {
        this.$router.push({ name: "Resource", params: { Type: n } });
        this.$cookies.set("TopActive", tabs);
      }
    },
  },
  mounted() {
    if (this.$cookies.get("city")) {
      this.city = this.$cookies.get("city");
    }
    if (this.$cookies.get("TopActive")) {
      this.active = this.$cookies.get("TopActive");
    }
  },
};
</script>

<style scoped>
.top-taps {
  height: 100px;
  background-color: #fff;
  line-height: 100px;
}
.tabs-cont {
  width: 1200px;
  margin: 0 auto;
  height: 100px;
  overflow: hidden;
}
.left-cont {
  overflow: hidden;
}
.pro-name {
  font-size: 46px;
  color: #095aff;
  font-weight: bold;
  cursor: pointer;
}
.pro-func {
  color: #666;
  font-size: 18px;
  font-weight: bold;
  line-height: 26px;
  padding: 25px 0;
  margin-left: 5px;
  cursor: pointer;
}
.shu {
  width: 1px;
  height: 35px;
  background: #dcdcdc;
  margin: 0 26px;
  position: relative;
  top: 37px;
}
.city {
  color: #333;
  font-size: 15px;
  cursor: pointer;
}
.city span {
  color: #095aff;
}
.tabs-list {
  overflow: hidden;
}
.tabs-list li {
  float: left;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  margin-left: 40px;
}
.tabs-list li.active {
  color: #095aff;
}
.tabs-list li:hover {
  color: #095aff;
}
</style>